<template>
    <div class="btn-wrap" :class="btnClass"
        @click="click"
    >
        <div class="button base-color align-center"
             :class="{ 'btn-gray': disabledData}"
             :style="buttonStyle"
        >
           <slot></slot>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                disabledData: this. disabled
            }
        },
        watch: {
            disabled ( value ) {
                this.disabledData = value
            }
        },
        props: {
            btnClass: {
                type:String,
                default: ''
            },
            btnText: {
                type:String,
                default: ''
            },
            buttonStyle: {
                type:String,
                default: ''
            },
            disabled: {
                type: Boolean,
                default: true
            }
        },
        methods: {
            click () {
                if ( this.disabled ) return;
                this.$emit('btn-click')
            }
        }
    }
</script>

<style>
   .button{
       width: 100%;
       height: 3rem;
       line-height: 3rem;
   }
</style>